<template>
  <div class="tab_box">
    <div class="head_box">
      <select class="search_select" v-model="level" @change="changeselect">
        <option :value="-1">全部</option>
        <option :value="0">乡镇/街道</option>
        <option :value="1">村/社区</option>
      </select>
      <select class="search_select" @change="getLinkmanPointList" v-model="selectid">
        <option :value="-1">全部</option>
        <option :value="item.id" v-for="(item, index) in selectlist" :key="index">{{ level == 0 ? item.streetName : item.villageName }}</option>
      </select>
      <select class="search_select" v-model="searchType">
        <option :value="1">联系电话</option>
        <option :value="2">姓名</option>
      </select>
      <div class="search_box">
        <div class="search_icon" @click="getLinkmanPointList"></div>
        <input type="text" v-model="inputVal" :placeholder="searchType === 1 ? '请输入联系电话' : '请输入姓名'" @keyup.enter="getLinkmanPointList" class="search" />
      </div>
      <div class="closeBtn" @click="close"></div>
      <!-- <input type="text" class="Search_box" /> -->
    </div>
    <div style="width: 100%; max-height: 811px">
      <div class="container" style="width: 99%">
        <table>
          <thead>
            <tr>
              <th class="trClas">联系人</th>
              <th class="trClas">联系方式</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in Rescueteamlist" :key="index" :class="[item.state == 1 ? 'bg' : '', listIndex === index ? 'trBg' : '']" @click="pitch(item, index)">
              <td class="trClas">{{ item.linkman }}</td>
              <td class="trClas">{{ item.phone || '暂无' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getLinkmanPointList, getStreetList, getVillageList } from '@/api/index'
export default {
  props: {
    type: {
      type: String,
      default: 'xy'
    }
  },
  data () {
    return {
      level: -1,
      inputVal: '',
      searchType: 1,
      listIndex: -1, // 选中第几个
      selectid: '',
      selectlist: [],
      Rescueteamlist: []
    }
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    type () {
      if (this.type.search('zy-fzrlld-xz') !== -1) {
        // 乡镇街道
        this.level = 0
      } else if (this.type.search('zy-fzrlld-cq') !== -1) {
        // 村，社区
        this.level = 1
      }
      console.log('level', this.level)
    }
  },
  mounted () {
    if (this.type.search('zy-fzrlld-xz') !== -1) {
      // 乡镇街道
      this.level = 0
    } else if (this.type.search('zy-fzrlld-cq') !== -1) {
      // 村，社区
      this.level = 1
    } else this.level = -1
    setTimeout(() => {
      this.getLinkmanPointList()
    }, 500)
    this.changeselect()
  },
  methods: {
    pitch (val, index) {
      this.listIndex = index
      this.listIndex = index
      this.$emit('getData', val)
      this.trDbclick(val)
    },
    // 双击行
    trDbclick (item) {
      this.$emit('trdblclick', {
        id: item.linkmanPointId,
        firstTag: 'yjzy',
        tag: 'yjzyXZJD',
        lng: item.x,
        lat: item.y,
        ...item
      })
    },
    close () {
      this.$emit('close')
    },
    getLinkmanPointList () {
      const params = {
        type: this.level
      }
      if (this.level === 0) {
        params.type = 1
        if (this.selectid !== -1) {
          params.streetId = this.selectid
        }
      } else if (this.level === 1) {
        params.type = 2
        if (this.selectid !== -1) {
          params.villageId = this.selectid
        }
      }
      console.log(params)
      if (this.searchType === 1 && this.inputVal) params.phone = this.inputVal
      if (this.searchType === 2 && this.inputVal) params.name = this.inputVal
      getLinkmanPointList(params).then(res => {
        if (res.code === 200) {
          this.Rescueteamlist = res.result.linkmanList || []
          this.$emit('getlist', res.result.pointList)
        }
      })
    },
    changeselect () {
      this.selectid = -1
      if (this.level === 0) {
        getStreetList({ type: 1 }).then(res => {
          if (res.code === 200) {
            this.selectlist = res.result
          }
        })
      } else if (this.level === 1) {
        getVillageList().then(res => {
          if (res.code === 200) {
            this.selectlist = res.result
          }
        })
      } else if (this.level === -1) {
        this.selectlist = []
      }
      this.getLinkmanPointList()
    }
  }
}
</script>
<style lang="scss" scoped>
.head_box {
  width: 100%;
  height: 3.125rem /* 50/16 */;
  display: flex;
  justify-content: space-between;
}
.search_select {
  width: 5.75rem /* 140/16 */;
  height: 1.875rem /* 30/16 */;
  text-indent: 4px;
  @include themify($themes) {
    background-image: themed('select_bj');
    background-position: -5px -1px;
    background-size: 102px 40px;
    background-repeat: no-repeat;
    background-color: themed('yjzy_bg_search');
    border: none;
    outline: none;
    appearance: none;
    // border: 1px solid themed('yjzy_color_search');
    color: themed('yjzy_color_search');
  }
  // background: rgba(70, 159, 255, 0.1);
  // border: 1px solid #72e6ff;
  // box-shadow: 1px 4px 6px 0px #0c1422;
  outline: none;
  font-size: 12px;
  font-weight: 600;
  // color: #72e6ff;
  line-height: 24px;
}
select option {
  color: black;
}
.search_box {
  width: 8.75rem /* 140/16 */;
  height: 1.875rem /* 30/16 */;
  overflow: hidden;
  // background-image: url(../../assets/images/search_box_bj.png);
  position: relative;
  @include themify($themes) {
    background: themed('search_box');
    // color: themed('search_font');
  }
}
.search_icon {
  @include themify($themes) {
    background-image: themed('search_icon');
  }
  width: 11px;
  height: 11px;
  position: absolute;
  top: 9px;
  left: 6px;
  cursor: pointer;
}
.search {
  width: 100%;
  height: 30px;
  outline: none;
  font-size: 12px;
  // color: #ffffff;
  line-height: 24px;
  background: none;
  border: none;
  margin-left: 20px;
  @include themify($themes) {
    color: themed('search_font1');
  }
}
.closeBtn {
  width: 3.25rem /* 52/16 */;
  height: 3.25rem /* 52/16 */;
  position: absolute;
  cursor: pointer;
  @include themify($themes) {
    background: themed('bz-point-close-bg1');
    background-repeat: no-repeat;
    top: themed('yjzy_closeBtn_position_t');
    right: themed('yjzy_closeBtn_position_r');
  }
}
.tab_box {
  width: 31.25rem /* 500/16 */;
  height: 100%;
  display: inline-block;
  @include themify($themes) {
    background: themed('bz-point-bg');
  }
  background-size: 100% 100%;
  margin-left: auto;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.625rem /* 10/16 */;
  box-sizing: border-box;
  z-index: 99;
  animation: inBox 0.5s linear;
}
.tab_box .container table thead tr {
  @include themify($themes) {
    background: themed('yjzy_bg_Wbg_tabThTwo');
    color: themed('bz-point-table-head-font');
  }
  opacity: 0.5;
  border-bottom: 1px solid #ffffff;
  display: flex;
  justify-content: space-around;
  width: 98%;
}
.tab_box .container table tbody {
  width: 100%;
  height: calc(100vh - 101px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px 0;
}
.bg td {
  @include themify($themes) {
    background: themed('tj_color');
  }
}
.trBg {
  @include themify($themes) {
    background: themed('tr_bgcolor');
    color: #fff;
  }
}
.container table {
  @include themify($themes) {
    color: themed('tj_color');
  }
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.conatiner table thead,
tbody,
tr,
th,
td {
  display: inline-block;
}

.container table thead {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #000;
}

.container table thead tr {
  width: 100%;
  padding-right: 10px;
  box-sizing: border-box;
}
.container table tbody tr {
  width: 98%;
  line-height: 25px;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-around;
  cursor: pointer;
}

.container table tbody tr td {
  text-align: center;
}
.trClas {
  width: 33%;
  text-align: center;
}
// 滚动条整体部分
.tab_box .container table tbody::-webkit-scrollbar {
  width: 4px;
}
//滚动条里面的滑块
.tab_box .container table tbody::-webkit-scrollbar-thumb {
  height: 20px;
  @include themify($themes) {
    background: themed('bz-scrollbar-thumb-color');
  }
}
//滚动条的轨道
.tab_box .container table tbody::-webkit-scrollbar-track {
  @include themify($themes) {
    background: themed('bz-scrollbar-track-color');
  }
}
input::-webkit-input-placeholder {
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
@keyframes inBox {
  0% {
    left: -500px;
  }
  90% {
    left: 20px;
  }
  100% {
    left: 0;
  }
}
</style>
